<template>
  <a-form
    ref="form1Ref"
    :model="formValue"
    @submit="handleSubmit"
    style="margin: 40px 0; width: 100%; padding-right: 10%"
  >
    <a-form-item label="付款账户" field="myAccount" :rules="rules.myAccount">
      <a-select
        v-model="formValue.myAccount"
        :options="myAccountList"
        placeholder="请选择付款账户"
      />
    </a-form-item>
    <a-form-item label="收款账户" field="account" :rules="rules.account">
      <!--        <a-select v-model="formValue.accountType" placeholder="请选择">-->
      <!--          <a-select-option :value="1">微信</a-select-option>-->
      <!--          <a-select-option :value="2">支付宝</a-select-option>-->
      <!--        </a-select>-->
      <a-input v-model="formValue.account" placeholder="请输入收款账户" />
    </a-form-item>
    <a-form-item label="收款人姓名" field="name" :rules="rules.name">
      <a-input v-model="formValue.name" placeholder="请输入收款人姓名" />
    </a-form-item>
    <a-form-item label="转账金额" field="money" :rules="rules.money">
      <a-input v-model="formValue.money" placeholder="请输入转账金额">
        <template #prefix>
          <span class="text-gray-400">￥</span>
        </template>
      </a-input>
    </a-form-item>
    <a-form-item :wrapperCol="{ offset: 5 }">
      <a-button type="primary" html-type="submit">下一步</a-button>
    </a-form-item>
  </a-form>
</template>

<script lang="ts" setup>
  import { ref } from 'vue';
  import { Message } from '@arco-design/web-vue';

  const myAccountList = [
    {
      label: 'NaiveUiAdmin@163.com',
      value: 1,
    },
    {
      label: 'NaiveUiAdmin@qq.com',
      value: 2,
    },
  ];

  const emit = defineEmits(['nextStep']);

  const form1Ref: any = ref(null);

  const formValue = ref({
    accountType: 1,
    myAccount: null,
    account: 'xioama@qq.com',
    money: '1280',
    name: 'Ah jung',
  });

  const rules = {
    name: [
      {
        required: true,
        message: '请输入收款人姓名',
        trigger: 'blur',
      },
    ],
    account: [
      {
        required: true,
        message: '请输入收款账户',
        trigger: 'blur',
      },
    ],
    money: [
      {
        required: true,
        message: '请输入转账金额',
        trigger: 'blur',
      },
    ],
    myAccount: [
      {
        required: true,
        type: 'number',
        message: '请选择付款账户',
        trigger: 'change',
      },
    ],
  };

  function handleSubmit({ errors }) {
    if (errors) {
      console.log('error', errors);
      return Message.error('验证失败，请填写完整信息');
    }
    emit('nextStep');
  }
</script>
